<script setup lang="ts">
import {type InferType, object, string} from 'yup'
import type {FormSubmitEvent} from '#ui/types'

const emit = defineEmits();

const authModel = ref('signIn')

const regMobile = /^1[3-9]\d{9}$/

const schema = object({
  username: string()
      .matches(regMobile, '请输入正确的手机号码')
      .required('请输入手机号码'),
  password: string()
      .min(6, '密码至少6个字符')
      .required('请输入密码')
})

type Schema = InferType<typeof schema>

interface state {
  username: undefined | string
  password: undefined | string
  keepSignedIn: boolean
}

const state = reactive<state>({
  username: undefined,
  password: undefined,
  keepSignedIn: true
})

const loading = ref(false)

import {useMessage} from 'naive-ui'

const message = useMessage()
const user = useUserStore()
const captchaFlag = ref(false)
const captchaSuccess = async (e: any) => {
  console.log(e)
  captchaFlag.value = false
  loading.value = true
  const {error, data: data} = await user.signIn({...state, ...e})
  if (error && error.value) {
    message.error(error.value.data.errMsg)
    loading.value = false
  } else {
    message.success(`登录成功，欢迎回来`)
    setTimeout(() => {
      user.signIn(data.value)
      emit('success', data.value)
      loading.value = false
    }, 500)
  }
}

const signUpSuccess = (data: any) => {
  emit('success', data)
}

async function onSubmit(event: FormSubmitEvent<Schema>) {
  captchaFlag.value = true
  await captchaSuccess({})
}


const forgotPassword = () => {
  message.warning(`请联系管理员重置密码`)
  // console.log('forgotPassword')
  // emit('forgotPassword')
}


</script>

<template>
  <div v-if="authModel == 'signIn'">
    <div class="mx-auto w-full max-w-sm pb-6">
      <p class="text-2xl text-gray-900 dark:text-white font-bold text-center">欢迎回来</p>
    </div>
    <UForm :schema="schema" :state="state" class="space-y-4 w-full" @submit="onSubmit">
      <UFormGroup :label="`手机号`" name="username">
        <UInput v-model="state.username"/>
      </UFormGroup>

      <UFormGroup :label="`密码`" name="password">
        <UInput v-model="state.password" type="password"/>
      </UFormGroup>
      <div class="flex justify-between">
        <div>
          <UCheckbox v-model="state.keepSignedIn">
            <template #label>
              <span class="text-slate-400">保持登录</span>
            </template>
          </UCheckbox>
        </div>
        <div @click="forgotPassword" class="align-baseline text-sm text-slate-400 cursor-pointer">忘记密码
        </div>
      </div>

      <UButton :loading="loading" type="submit" block>
        登录
      </UButton>
    </UForm>
    <div class="flex flex-row items-center justify-center w-full my-5 text-sm space-x-2 rtl:space-x-reverse"><p
        class="">还没有帐户？</p>
      <button @click="authModel = 'signUp'" type="button" class="cursor-pointer">
        注册
      </button>
    </div>
  </div>
  <div v-if="authModel == 'signUp'">
    <SignUp @success="signUpSuccess"/>
    <div class="flex flex-row items-center justify-center w-full my-5 text-sm space-x-2 rtl:space-x-reverse"><p
        class="">已经有帐户了？</p>
      <button @click="authModel = 'signIn'" type="button" class="cursor-pointer">
        登录
      </button>
    </div>
  </div>
  <div class="text-sm">
    登录注册代表已同意
    <NuxtLink to="/d/terms" target="_blank" class="">《用户协议》
    </NuxtLink>
    <NuxtLink to="/d/privacy" target="_blank" class="">《隐私政策》
    </NuxtLink>
  </div>
  <!--  <Captcha :show="captchaFlag" @success="captchaSuccess"/>-->
</template>
